let btn = document.getElementById('add');
let inputs = document.querySelectorAll('input');
let list = document.querySelector('.bookList');
let modal = document.querySelector('.modal');
let saveBtn = document.querySelector('#savebtn');
let search = document.querySelector('.search');
let currentBook;
let closeBtn = document.querySelector('#closebtn');
let allCheckbox = document.querySelector('.all');
let alldelBtn = document.querySelector('.alldel');

inputs.forEach(input => {
    input.addEventListener('focus', function () {
        this.setAttribute('data-placeholder', this.placeholder);
        this.placeholder = '';
    });
    input.addEventListener('blur', function () {
        this.placeholder = this.getAttribute('data-placeholder');
    });
});

window.addEventListener('click', function (ev) {
    if (ev.target == modal)
        modal.style.display = 'none';
});

saveBtn.addEventListener('click', function () {
    let modalname = document.getElementById('modalname');
    let modalauthor = document.getElementById('modalauthor');
    let modalyear = document.getElementById('modalyear'); 

    if (currentBook) {
        let title = currentBook.querySelector('p:nth-child(2)');
        let author = currentBook.querySelector('p:nth-child(3)');
        let year = currentBook.querySelector('p:nth-child(4)');
        title.textContent = `书名：${modalname.value}`;
        author.textContent = `作者：${modalauthor.value}`;
        year.textContent = `出版年份：${modalyear.value}`;
        modal.style.display = 'none';
    }
});

closeBtn.addEventListener('click',function(){
    modal.style.display = 'none';
})

btn.addEventListener('click', function () {
    if (inputs[0].value == '')
        alert('书名不能为空');
    else if (inputs[1].value == '')
        alert('作者不能为空');
    else if (inputs[2].value == '')
        alert('出版年份不能为空');
    else {
        let book = document.createElement('div');
        book.classList.add('bookbox');

        let check = document.createElement('input');
        check.type='checkbox';
        check.addEventListener('change',function(){
            Allcheck();
        });
        book.appendChild(check);
        
        let title = document.createElement('p');
        title.textContent = `书名：${inputs[0].value}`;
        book.appendChild(title);

        let author = document.createElement('p');
        author.textContent = `作者：${inputs[1].value}`;
        book.appendChild(author);

        let year = document.createElement('p');
        year.textContent = `出版年份：${inputs[2].value}`;
        book.appendChild(year);
        
        let create = document.createElement('button');
        create.textContent = '修改';
        create.classList.add('createbox');
        create.addEventListener('click', function () {
            let modalname = document.getElementById('modalname');
            let modalauthor = document.getElementById('modalauthor');
            let modalyear = document.getElementById('modalyear');
            modalname.value = title.textContent.replace('书名：', '');
            modalauthor.value = author.textContent.replace('作者：', '');
            modalyear.value = year.textContent.replace('出版年份：', '');
            modal.style.display = 'block';
            currentBook = book;
        });
        book.appendChild(create);

        let del = document.createElement('button');
        del.textContent = '删除';
        del.classList.add('deletebox');
        del.addEventListener('click', function () {
            list.removeChild(book);
        });

        book.appendChild(del);

        list.appendChild(book);

        inputs.forEach(input => {
            input.value = '';
        });
    }
});

search.addEventListener('keydown', function () {
    setInterval(function () {
        let searchText = search.value;
        let allBook = list.querySelectorAll('.bookbox');
        allBook.forEach(book => {
            let title = book.querySelector('p:nth-child(2)').textContent;
            let name = book.querySelector('p:nth-child(3)').textContent;
            if (title.includes(searchText) || name.includes(searchText)) {
                book.style.display = 'block';
            } else {
                book.style.display = 'none';
            }
        });
    }, 500);
});

allCheckbox.addEventListener('change', function() {
    let checkboxes = list.querySelectorAll('.bookbox input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

function Allcheck() {
    let allCheckboxes = list.querySelectorAll('.bookbox input[type="checkbox"]');
    let allChecked = true;
    allCheckboxes.forEach(checkbox => {
        if (!checkbox.checked) {
            allChecked = false;
        }
    });
    allCheckbox.checked = allChecked;
}

alldelBtn.addEventListener('click', function() {
    let checkboxes = list.querySelectorAll('.bookbox input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            let book = checkbox.parentNode; 
            list.removeChild(book);
        }
    });
    allCheckbox.checked = false;
});